<template>
  <div class="customer_list">
    <el-table
      :data="call_list"
      stripe
      style="width: 100%"
      :header-cell-style="{background:'#E9EEF7',color:'#606266',height: '50px'}"
      :row-class-name="tableRowClassName">
      <el-table-column
        label="拨打电话"
        width="100">
        <template slot-scope="scope">
          <el-button
            class="submit"
            type="primary"
            icon="el-icon-phone-outline"
            @click="clickData(scope.row)">
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="doctorName"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="hospitalName"
        label="所属医院"
        width="230">
      </el-table-column>
      <el-table-column
        prop="depart"
        show-overflow-tooltip
        label="科室"
        width="100">
      </el-table-column>
      <el-table-column
        prop="productName"
        show-overflow-tooltip
        label="产品"
        width="100">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
        width="100">
      </el-table-column>
      <!-- <el-table-column
        prop="doctorContact"
        label="手机号">
        <template slot-scope="scope">
          <div @row-click="clickData(scope.row)">
            <el-popover trigger="hover" placement="right">
              <p
                v-for="(item,index) in scope.row.doctorContact"
                :key="index"
                @click="clickData(scope.row)">
                {{ item | subPhone }}
              </p>
              <div slot="reference" class="name-wrapper">
                <el-tag>{{ scope.row.doctorContact[0] | subPhone }}</el-tag>
              </div>
            </el-popover>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column
        show-overflow-tooltip
        prop="academic_title"
        label="学术职称">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="executeTitle"
        label="行政职称"
        min-width="100">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="techTitle"
        label="技术职称"
        min-width="100">
      </el-table-column>
    </el-table>
    <div class="call_phone" v-if="is_call_phone">
      <div class="container">
        <i class="el-icon-close" @click="close_promit"></i>
        <div class="call_container">
          <div class="visti">
            <p>选择拜访目的：</p>
            <el-select
              v-model="visitedPurpose"
              multiple
              collapse-tags
              style="margin-left: 20px;"
              placeholder="请选择"
              filterable
              allow-create>
              <el-option
                v-for="item in visited_purpose"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="doctor_info">
            <p>医院信息：</p>
            <div class="info">
              <div>
                <span>姓名：</span>
                <span>{{visited_specific_purpose.doctorName}}</span>
              </div>
              <div>
                <span>所属医院：</span>
                <span>{{visited_specific_purpose.hospitalName}}</span>
                <!-- <span>三级甲等</span> -->
              </div>
              <div>
                <span>联系方式：</span>
                <span style="cursor:pointer;" v-if="visited_specific_purpose.doctorContact.length > 1">
                  <el-select v-model="phone" placeholder="请选择">
                    <el-option
                      v-for="item in visited_specific_purpose.doctorContact"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </span>
                <span v-else>{{visited_specific_purpose.doctorContact[0]}}</span>
              </div>
              <div>
                <span>科室：</span>
                <span>{{visited_specific_purpose.depart}}</span>
              </div>
              <div>
                <span>产品：</span>
                <span>{{visited_specific_purpose.productName}}</span>
              </div>
              <div>
                <span>上次拨打时间：</span>
                <span>{{visited_specific_purpose.recordTime}}</span>
              </div>
              <div>
                <span>上次通话状态：</span>
                <span>{{callStatus}}</span>
              </div>
              <div>
                <span>备注：</span>
                <span>{{visited_specific_purpose.memo ? visited_specific_purpose.memo : '暂无备注'}}</span>
              </div>
            </div>
          </div>
          <el-button class="submit" type="primary" icon="el-icon-phone-outline" :loading="loading"
                    @click="call_phone_contact(phone,visited_specific_purpose)">拨打电话
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex';
  import {checkPhoneNumber} from '../../utils/validate';
  import {api, baseAjax} from '../../api/api';
  import Cookies from 'js-cookie';
  import {statusCode} from '../../utils/index';
  import bus from '../../assets/js/eventBus';

  export default {
    computed: {
      ...mapState({
        'is_dial': state => state.calls.is_dial,
        'loading': state => state.calls.loading,
      })
    },
    data() {
      return {
        call_list: [],
        visitedPurpose: [],    //选中的拜访目的
        is_call_phone: false,   //是否展示列表弹框
        phone: '',
        user_info: [],
        visited_specific_purpose: {},  //弹框中具体的医生信息
        visited_purpose: [
          {   //拜访目的
            id: '1',
            label: '招募医生'
          }, {
            id: '2',
            label: '分型：了解医生信息'
          }, {
            id: '3',
            label: '传递：影响医生观念'
          }, {
            id: '4',
            label: '处方：向医生推荐用药'
          }, {
            id: '5',
            label: '客情'
          }, {
            id: '6',
            label: '收病例'
          }, {
            id: '7',
            label: '医生召回'
          }, {
            id: '8',
            label: '活动邀请'
          }, {
            id: '9',
            label: '活动回访'
          }, {
            id: '10',
            label: '其他'
          }],
        doctorContact: '',
        callStatus:''   //通话状态
      }
    },
    created() {
      bus.$on('getCall', (res) => {
        this.getCallPhone(res)
      })
      bus.$on('closeCallPhone', (res) => {
        this.is_call_phone = res;
      })
    },
    mounted() {
      this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
      if (this.$route.query.id){
        this.getCallPhone(this.$route.query.id)
      }else {
        this.getCallPhone(this.phone)
      }
    },
    methods: {
      ...mapMutations({
        phone_call: 'calls/callPhone',
        hang: 'calls/hang'
      }),
      //修改table隔行颜色
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'success_row';
        }
        return '';
      },
      //点击列表显示弹框展示信息
      clickData(row) {
        let that = this;
        this.visitedPurpose = [];
        this.phone = '';
        this.is_call_phone = true;
        this.$store.state.calls.loading = false;
        this.visited_specific_purpose = row;
        bus.$emit('getDoctorId', row.doctorId)
        api.get_call_status = {
          url:api.get_call_status_url+row.doctorId,
          method:api.get_call_status.method
        }
        baseAjax(api.get_call_status, '', (res)=>{
          that.callStatus = res.data.callStatus;
        });
      },
      //关闭弹窗
      close_promit() {
        this.visitedPurpose = [];
        this.phone = '';
        this.is_call_phone = false;
        this.$store.state.calls.loading = false;
        this.hang();
      },
      //拨打电话
      call_phone() {
        if (!this.phone) {
          this.$alert('请输入手机号');
          this.$store.state.calls.loading = false;
        } else if (!checkPhoneNumber(this.phone)) {
          this.$alert('请输入正确的手机号');
          this.$store.state.calls.loading = false;
        } else {
          this.$store.state.calls.loading = true;
          this.$store.state.calls.is_calling = true;
          this.phone_call(this.phone);
        }
      },
      //获取拨打电话列表数据
      getCallPhone(phone) {
        let that = this;
        let data = {
          doctorValue: phone,
          repId: this.user_info.repId
        };
        baseAjax(api.call_phone_list, data, (res) => {
          if (res.code === statusCode.success) {
            let {value} = res.data;
            value.forEach(item => {
              item.academic_title = item.academic_title ? item.academic_title : '无';
              item.executeTitle = item.executeTitle ? item.executeTitle : '无';
              item.techTitle = item.techTitle ? item.techTitle : '无';
            });
            that.call_list = value;
          }else if(res.code === statusCode.not_login){
            that.$alert('用户未登录,请重新登录').then(()=>{
              that.$store.dispatch('user/resetToken').then(()=>{
                location.reload()  // 为了重新实例化vue-router对象 避免bug
              })
              that.$router.replace('/login');
            });
          }
        });
      },
      //列表中手机号拨打电话
      call_phone_contact(item, info) {
        if (this.is_dial === false) {
          return false;
        } else {
          if(info.doctorContact.length > 1){
             this.phone = item;
          }else{
            this.phone = info.doctorContact[0];
          }
          this.$store.state.calls.selected_visited_purpose = this.visitedPurpose;
          this.$store.state.calls.doctorId = info.doctorId;
          this.$store.state.calls.selected_product_id = info.productId;
          this.call_phone();
          bus.$emit('getDoctorId', info.doctorId)
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .customer_list {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;

    /deep/ .el-table {
      color: #3B4859;

      thead {
        color: #3B4859;
      }

      th, td {
        text-align: center;
      }

      .success_row {
        background-color: #F8F9FB !important;
      }

      .el-table__body-wrapper {
        .el-table__body {
          tbody {
            .el-table__row {
              cursor: pointer;
            }
          }
        }
      }

      .cell {
        overflow: visible;

        .name-wrapper {
          span {
            color: #000;
          }
        }
      }
    }

    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
      background: none;
    }
  }

  .call_phone {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1005;
    overflow:auto;

    .container {
      width: 600px;
      height: 600px;
      background-color: #FFF;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding-top: 60px;
      padding-left: 51px;
      padding-bottom:60px;
      padding-right:51px;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2B3A4F;
      position: relative;
      box-sizing:border-box;

      .el-icon-close {
        position: absolute;
        top: 29px;
        right: 38px;
        cursor: pointer;
      }

      .call_container{
        // overflow:auto;
        height:100%;
        .visti {
          display: flex;
          align-items: center;
          margin-bottom: 32px;
        }

        .doctor_info {
          display: flex;

          p {
            margin-top: 0px;
            margin-right: 55px;
          }

          .info {
            div {
              margin-bottom: 19px;
            }

            /deep/.el-select {
              margin-bottom: 0px;
              width: 45%;
              .el-input{
                input{
                  height: 32px;
                }
                .el-input__suffix{
                  .el-input__suffix-inner{
                    .el-input__icon{
                      line-height:32px;
                    }
                  }
                }
              }
            }

            // div:nth-child(2){
            //   display:flex;
            //   justify-content:center;
            //   // span:last-child{
            //   //   display:inline-block;
            //   //   width:70px;
            //   //   height:20px;
            //   //   background-color:#3B7CFF;
            //   //   color:#FFF;
            //   //   border-radius:10px;
            //   //   font-size:14px;
            //   //   text-align:center;
            //   //   padding-top:1.5px;
            //   //   box-sizing:border-box;
            //   //   margin-left:7px;
            //   // }
            // }
          }
        }

        .submit {
          margin-left: 198px;
          margin-top: 27px;
          width: 132px;
          height: 47px;
          background-color: #3B7CFF;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFF;
          border-radius: 6px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          img {
            width: 25px;
            height: 25px;
            margin-right: 8px;
          }
        }
      }
    }
  }

  .el-popover {
    p {
      cursor: pointer;
    }
  }

  .el-tooltip__popper {
    div {
      cursor: pointer;
      font-size: 18px;
    }
  }

  .call_phone_tooltip {
    color: #409EFF !important;
    cursor: default;
  }

  .call_phone_popper {
    color: #EFF2F7;
  }


</style>
